import { Navigate, useRoutes } from 'react-router-dom'

import NotFound from '../components/404'
import Login from '../components/Login'
import Main from '../components/Main'
import About from '../components/Main/About'
import Home from '../components/Main/Home'
import Music from '../components/Main/Home/Music'
import News from '../components/Main/Home/News'


const routes = [
    {
        path: "/login",
        element: <Login />,
    },
    {
        path: "/main",
        element: <Main />,
        children: [
            {
                path: "/main/about",
                element: <About />,
            },
            {
                path: "/main/home",
                element: <Home />,
                children: [
                    {
                        path: "/main/home/music",
                        element: <Music />,
                    },
                    {
                        path: "/main/home/news",
                        element: <News />,

                    }
                ]

            }
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login" />
    },
    {
        path: "*",
        element: <NotFound />
    },
]

export default routes   //方式1


//方式2 这样的写法,认为定义了 GetRoutes 组件,这个组件就是根据路由表生成的 路由配置结构
export const GetRoutes = () => {
    return useRoutes(routes)
}

//方式3  自定义hooks
export const useMyRoutes = () => {
    //在自定义hooks中是可以使用hook
    return useRoutes(routes)
}